<template>
  <div class="content">
    <div class="left">01</div>
    <div class="right">
      <ul class="alarmInfoList">
        <vue-seamless-scroll
          :data="listData"
          :class-option="optionHover"
        >
          <li
            v-for="(item, index) in listData"
            :key="index"
            class="item"
          >
            <div class="firstLine">
              <div class="img">
                <img
                  src="../../../assets/level1.png"
                  alt=""
                >
              </div>
              <div class="info">
                {{ item.info }}
              </div>
            </div>
            <div class="secondLine">
              <div>{{ item.time }}</div>
              <div class="confirm">确认</div>
            </div>
          </li>
        </vue-seamless-scroll>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          img: '',
          info: '【南京站·空调】从运行到停止',
          time: '2021-08-13 15:36:27'
        },
        {
          img: '',
          info: '【南京站·空调】从停止到运行',
          time: '2021-08-13 12:00:15'
        },
        {
          img: '',
          info: '【南工大产业园站·1#出线断路器】从分到合',
          time: '2021-08-12 20:48:33'
        },
        {
          img: '',
          info: '【南工大产业园站·1#门】从打开到关闭',
          time: '2021-08-12 15:03:47'
        },
        {
          img: '',
          info: '【江苏软件园站·2#出线柜地刀】从分到合',
          time: '2021-08-12 10:30:25'
        }
      ]
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 100%;
    border: 1px solid #000;
    padding-top: 6%;
    > div {
        border: 1px solid #000;
    }
    .left {
        width: 40%;
    }
    .right {
        flex: 1;
        height: 100%;
        padding: 10px 0;
        .alarmInfoList {
            list-style: none;
            padding: 0;
            width: 100%;
            height: 100%;
            max-height: 100%;
            overflow: hidden;
            margin: auto 0;
            color: #fff;
            .item {
                .firstLine {
                    display: flex;
                    font-size: 16px;
                    padding: 8px 0;
                    border-bottom: 1px dashed #007165;
                    .img {
                        width: 30px;
                    }
                    .info {
                        width: 345px;
                        height: 21px;
                        line-height: 21px;
                        margin-left: 10px;
                        background: linear-gradient(
                            90deg,
                            #007165 0%,
                            rgba(22, 212, 196, 0) 100%
                        );
                        border-radius: 10px;
                    }
                }
                .secondLine {
                    display: flex;
                    align-items: center;
                    align-content: center;
                    justify-content: space-between;
                    font-size: 16px;
                    padding: 8px 20px 8px 40px;
                    border-bottom: 1px dashed #007165;
                    .confirm {
                        background: #007165;
                        border-radius: 10px;
                        padding: 5px;
                    }
                }
            }
        }
    }
}
</style>
